/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-07-14 15:10:40
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-13 17:12:11
 */
const lineDash = [4, 2, 1, 2];
const setState = (name, value, item) => {
    const shape = item.get('keyShape');
    if (name === 'running') {
        if (value) {
            let index = 0;
            shape.animate(() => {
                index++;
                if (index > 9) {
                    index = 0;
                }
                const res = { lineDash, lineDashOffset: -index };
                return res;
            }, {
                repeat: true,
                duration: 3000,
            });
        } else {
            shape.stopAnimate();
            shape.attr('lineDash', null);
        }
    } else if(name == 'active' || name == 'hover') {
        if(value) {
            shape.attr({
                shadowColor: shape?.attrs?.stroke || '#3056E3',
                shadowBlur: 10,
                strokeOpacity: 1
            });
        } else {
            shape.attr({
                shadowColor: 'none',
                shadowBlur: 0,
                strokeOpacity: 0.8
            });
        }  
    }
};
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
  return [
      ['M', x - r, y - r],
      ['a', r, r, 0, 1, 0, r * 2, 0],
      ['a', r, r, 0, 1, 0, -r * 2, 0],
      ['M', x + 2 - r, y - r],
      ['L', x + r - 2, y - r],
      ['M', x, y - 2 * r + 2],
      ['L', x, y - 2],
  ];
};
const drawMarker = (cfg, group, shape) => {
  if(cfg.label == "拓扑组成") {
    const startPoint = shape.getPoint(0.3);
    group.addShape('marker', {
        attrs: {
            x: startPoint.x,
            y: startPoint.y + 8,
            r: 8,
            stroke: 'red',
            fill: '#fff',
            symbol: EXPAND_ICON,
            cursor: 'pointer',
            zIndex:2,
        },
        name: 'add-node-shape',
    });
  }
}
export default G6 => {
  G6.registerEdge( 'can-running', {
      afterDraw(cfg, group) {
        const shape = group.get('children')[0];
        drawMarker(cfg, group, shape);
      },
        update: undefined,
        setState
      },
      'line',
  );
  G6.registerEdge( 'circle-running', {
    afterDraw(cfg, group) {
      const shape = group.get('children')[0];
      const startPoint = shape.getPoint(0);

      drawMarker(cfg, group, shape);

      const circle = group.addShape('circle', {
        attrs: {
          x: startPoint.x,
          y: startPoint.y,
          fill: shape?.attrs?.stroke || '#3056E3',
          r: 4,
        },
        name: 'circle-shape',
      });

      // animation for the red circle
      circle.animate(
        (ratio) => {
          // the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
          // get the position on the edge according to the ratio
          const tmpPoint = shape.getPoint(ratio);
          // returns the modified configurations here, x and y here
          return {
            x: tmpPoint.x,
            y: tmpPoint.y,
          };
        },
        {
          repeat: true, // Whether executes the animation repeatly
          duration: 4000, // the duration for executing once
        },
      );
    },
    setState,
    update: undefined,
  },
  'line',
  // 'polyline',
  );
}
    